<template>
  <el-dialog
    v-if="load"
    v-model="dialogVisible"
    title="选择切换SKU"
    width="1050"
    :close-on-click-modal="false"
    @close="handleClose"
    :z-index="2000"
  >
    <div class="flex flex-wrap gap-[8px] mb-4">
      <VGroup>
        <el-select class="selectClass !w-[120px]" v-model="form.skuRange.type">
          <el-option
            v-for="item in skuOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <multi-input
          v-model="form.skuRange.value"
          placeholder="请输入"
          class="w-50"
        ></multi-input>
      </VGroup>
      <el-input
        class="w-40"
        v-model="form.sku_cn_title"
        placeholder="请输入中文名称"
      ></el-input>
      <el-button class="ml-auto m-0" type="primary" @click="handleSearch()"
        >查询</el-button
      >
      <el-button class="!ml-0" @click="handleReset()">重置</el-button>
    </div>
    <vxe-table ref="tableRef" :data="tableData" height="530" resizable>
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="attr_img" title="产品" width="80">
        <template #default="{ row }">
          <VImage
            :src="row.attr_img_watermark || row.attr_img"
            width="60"
            height="60"
            :preview="false"
          ></VImage>
        </template>
      </vxe-column>
      <vxe-column field="sku" title="SKU" width="120">
        <template #default="{ row }">
          <div class="flex">
            {{ row.sku }}
            <div
              v-if="row.is_combination == 1"
              class="bg-[#E50113] text-white text-xs w-[20px] h-[20px] leading-[20px] rounded-full text-center ml-2"
            >
              组
            </div>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="custom_sku" title="自定义SKU" width="120"></vxe-column>
      <vxe-column field="sku_cn_title" title="产品名称" width="220">
        <template #default="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="row.sku_cn_title"
            placement="top-start"
          >
            <VText :line="3" :value="row.sku_cn_title"></VText>
          </el-tooltip>
        </template>
      </vxe-column>

      <vxe-column field="specification" title="开发人/开发时间">
        <template #default="{ row }">
          <div>{{ row.developer_text }}</div>
          <div>{{ row.dev_add_time }}</div>
        </template>
      </vxe-column>
    </vxe-table>
    <div>
      <vxe-pager
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[10, 20, 100]"
        @page-change="pageChange"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'Jump',
          'PageCount',
          'NextPage',
          'NextJump',
          'Sizes',
          'Total',
        ]"
      >
      </vxe-pager>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="serveFun"> 保存 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ref, reactive, toRefs } from "vue";
import { querySkuList } from "@/views/goods-management/api/index.js";
import VImage from "@/components/Image/index.vue";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false);

const props = defineProps({
  current_sku: {
    type: String,
    default: "",
  },
  checked: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const { current_sku, checked } = toRefs(props);

const skuOption = [
  { label: "系统SKU", value: "sku" },
  { label: "自定义SKU", value: "custom_sku" },
];

const data = reactive({
  load: false,
  tableData: [],
  form: {
    skuRange: { type: "sku", value: [], range: false },
  },
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  },
});

const { load, tableData, form, page } = toRefs(data);

const open = async () => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  dialogVisible.value = true;
  getList();
};

const getList = async () => {
  const formData = {
    is_alternative: 1,
    current_sku: current_sku.value,
    ...page.value,
  };

  for (const key in form.value) {
    if (form.value.hasOwnProperty(key) && form.value[key].type) {
      formData[form.value[key].type] = form.value[key].value;
    }
  }

  const res = await querySkuList({ ...formData, ...form.value });
  tableData.value = res.data;
  page.value.total = res.total;
};

const handleSearch = () => {
  page.value.pageNum = 1;
  getList();
};

const handleReset = () => {
  form.value = {
    skuRange: { type: "sku", value: [], range: false },
  };
  getList();
};

const pageChange = (val) => {
  page.value.pageNum = val.currentPage;
  page.value.pageSize = val.pageSize;
  getList();
};

const handleClose = () => {
  dialogVisible.value = false;
};

const tableRef = ref();
// const checkboxChangeEvent = () => {
//   const $table = tableRef.value;
//   if ($table) {
//     records.value = $table.getCheckboxRecords();
//   }
// };

const getSelectRow = () => {
  const $table = tableRef.value;
  if ($table) {
    return $table.getCheckboxRecords();
  }
  return [];
};

const serveFun = async () => {
  const selected = getSelectRow();
  if (!selected.length) {
    ElMessage.error("请选择SKU");
    return;
  }
  const alreadySelectedSKUs = checked.value
    .filter((i) => !i.delete)
    .map((i) => i.alternative_sku); // 假设SKU有一个唯一的id字段

  const hasDuplicateSKU = selected.some((i) => alreadySelectedSKUs.includes(i.sku));

  if (hasDuplicateSKU) {
    ElMessage.error("请选择未被选中的SKU");
    return;
  }

  emits("selected", selected);
  handleClose();
};

const emits = defineEmits("selected");
defineExpose({ open });
</script>
<style scoped>
:deep(.vxe-pager.is--perfect) {
  border: 0;
}
</style>
